import { Form, Input, Button} from 'antd';
import { UserOutlined, LockOutlined,MailOutlined,PhoneOutlined,EyeTwoTone,EyeInvisibleOutlined} from '@ant-design/icons';
import { Link,useNavigate} from 'react-router-dom';
import { message } from "antd";
import { register } from "@/api/service/userService"

const bg={
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center', 
    height: '100vh', 
    backgroundImage: 'linear-gradient(to right, #9fe1fa, #f4edc9)'
}

const register_card={
     width: '400px', 
     padding: '24px', 
     backgroundColor: 'white', 
     borderRadius: '8px', 
     boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)'
}

export default function Register(){
    const [form] = Form.useForm()
    const [messageApi, contextHolder] = message.useMessage();
    const iconRender = (visible:Boolean) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)
    const navigate = useNavigate()
    
    const onFinish = (values:any) => {
      console.log(values);
    // 进行接口请求
    register(values).then(result => {
      console.log(result);
      //注册成功给提示信息
      messageApi.open({
        type: 'success',
        content: '注册成功,请登录！',
      }).then(() => {
        // 跳转到登录界面
        navigate("/login")
      });
    }).catch(err => {
      // 注册失败给提示信息
      messageApi.open({
        type: 'error',
        content: err.message,
      });

    })
  };

    const onReset = () => {
        form.resetFields();
    };

    return (
     <div style={bg}>
      {/* 提示框 */}
      {contextHolder}
      <div style={register_card}>
        <h2 style={{ textAlign: 'center' }}>立即注册</h2>
        <Form
          form={form}
          name="register"
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '用户名不能为空!' },
             {pattern: /^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/, message: '6至20位，以字母开头，允许字母、数字、减号、下划线' }]}
              hasFeedback
          >
            <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
          </Form.Item>
         
          <Form.Item
            name="password"
            rules={[{ required: true, message: '密码不能为空!' },
            { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,20}$/, message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符' }
            ]}
            hasFeedback
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请输入密码"
              iconRender={iconRender}
            />
          </Form.Item>
          <Form.Item
            name="phone"
            rules={[{ required: true, message: '手机号不能为空!' },
            {pattern: /^1[3-9]\d{9}$/, message: '请输入11位手机号!' },
           ]}
            hasFeedback
          >
            <Input prefix={<PhoneOutlined />} placeholder="请输入手机号" />
          </Form.Item>
           <Form.Item
            name="email"
            rules={[{ required: false }, { type: 'email', message: '只允许英文字母、数字、下划线、英文句号、以及中划线、@符号组成!' }]}
          >
            <Input prefix={<MailOutlined />} placeholder="邮箱" />
          </Form.Item>
          <Form.Item>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <Button type="primary" htmlType="submit" style={{ width: '48%' }}>
                    立即注册
                </Button>
                <Button type="primary" onClick={onReset} style={{ width: '48%' }}>
                    重置
                </Button>
            </div>
        </Form.Item>
        </Form>
        <div style={{ textAlign: 'center' }}>
          已有账号？ <Link to="/login">立即登录</Link>
        </div>
      </div>
    </div>
    )
}